<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh-CN">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>JSSH</title>

    <link rel="shortcut icon" href="/assets/img/favicon.ico">

    <script src="/plugins/jquery/jquery-3.4.1.min.js" charset="utf-8"></script>
    <script src="/assets/js/jssh.js" charset="utf-8"></script>

    <link rel="stylesheet" href="/plugins/xterm/xterm.css"/>
    <script src="/plugins/xterm/xterm.js" charset="utf-8"></script>
    <script src="/plugins/layui/layui.js"></script>

    <link rel="stylesheet" href="/plugins/layui/css/layui.css">

</head>
<body class="layui-layout-body" th:inline="text">

<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo layui-hide-xs layui-bg-black">webssh</div>
        <!-- 头部区域（可配合layui 已有的水平导航） -->
        <ul class="layui-nav layui-layout-left">
            <!-- 移动端显示 -->
            <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
                <i class="layui-icon layui-icon-spread-left"></i>
            </li>

            <!--			<li class="layui-nav-item layui-hide-xs"><a href="">nav 1</a></li>-->
            <!--			<li class="layui-nav-item layui-hide-xs"><a href="">nav 2</a></li>-->
            <!--			<li class="layui-nav-item layui-hide-xs"><a href="">nav 3</a></li>-->
            <li class="layui-nav-item">
                <!--				<a href="javascript:;">nav groups</a>-->
                <dl class="layui-nav-child">
                    <!--					<dd><a href="">menu 11</a></dd>-->
                    <!--					<dd><a href="">menu 22</a></dd>-->
                    <!--					<dd><a href="">menu 33</a></dd>-->
                </dl>
            </li>
        </ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item layui-hide layui-show-md-inline-block">
                <a href="javascript:;">
                    <!--					<img src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" class="layui-nav-img">-->
                    <!--					tester-->
                </a>
                <dl class="layui-nav-child">
                    <!--					<dd><a href="">Your Profile</a></dd>-->
                    <!--					<dd><a href="">Settings</a></dd>-->
                    <!--					<dd><a href="">Sign out</a></dd>-->
                </dl>
            </li>
            <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
                <a href="javascript:;">
                    <!--					<i class="layui-icon layui-icon-more-vertical"></i>-->
                </a>
            </li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" lay-filter="test">
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="javascript:;">menu group 1</a>
                    <dl class="layui-nav-child">
                        <dd>
<!--                            <a class="open-popup" th:attr="data-url=@{/upload}"-->
<!--                               th:text="上传文件"></a>-->
                            <a>上传文件</a>
                            <form action="/upload" method="post" enctype="multipart/form-data" target="frameName">
                                <input type="file" name="multipartFile" id="multipartFile"/><br/>
                                <input type="submit" name="" id="" value="上传文件" />
                                <input type="hidden" name="host" th:value="${data.getHost()}">
                                <input type="hidden" name="port" th:value="${data.getPort()}">
                                <input type="hidden" name="username" th:value="${data.getUsername()}">
                                <input type="hidden" name="password" th:value="${data.getPassword()}">
                            </form>
                            <iframe src="" frameborder="0" name="frameName"></iframe>
                        </dd>
                        <!--						<dd><a href="javascript:;">menu 2</a></dd>-->
                        <!--						<dd><a href="javascript:;">menu 3</a></dd>-->
                        <!--						<dd><a href="">the links</a></dd>-->
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <!--					<a href="javascript:;">menu group 2</a>-->
                    <!--					<dl class="layui-nav-child">-->
                    <!--						<dd><a href="javascript:;">list 1</a></dd>-->
                    <!--						<dd><a href="javascript:;">list 2</a></dd>-->
                    <!--						<dd><a href="">超链接</a></dd>-->
                    <!--					</dl>-->
                </li>
                <!--				<li class="layui-nav-item"><a href="javascript:;">click menu item</a></li>-->
                <!--				<li class="layui-nav-item"><a href="">the links</a></li>-->
            </ul>
        </div>
    </div>

    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div style="padding: 15px;">
            <span>连接主机为 ${data.host}</span>
        </div>
        <div class="layui-row" style="margin-bottom: 10%">
            <div class="layui-fluid">
                <div class="layui-row"  id="container"></div>
                <!--       终端显示         -->
            </div>
        </div>
    </div>

    <div class="layui-footer">
        <!-- 底部固定区域 -->
    </div>
</div>

</div>

<!--模板引擎取得值，到这里已经实现了最基本的功能：输入用户名密码进行登录主机-->
<script th:inline="javascript" type="module">
    // import { Terminal } from '/static/plugins/xterm/xterm.js';
    // <!--/* thymeleaf预处理获取连接的信息 */-->
    const host = "${data.host}";
    const port = "${data.port}";
    const username = "${data.username}";
    const password = "${data.password}";

    // <!--/* 默认会打开终端窗口 */-->
    const terminal = openTerminal("connect", host, port, username, password, "container");

    // window.onresize = function() {
    //
    //     // this.terminal.fit();
    //     // this.terminal.scrollToBottom();
    //
    // };
    // const fitAddon = new FitAddon();

    // <!--/* 定义上传函数 */-->
    function upload() {

    }
</script>
</body>
</html>
